/*Common */
@font-face {
    font-family: "GraphikRegular";
    src: url("./ressources/fonts/GraphikRegular.otf") format("opentype");
}

#header {
    display: grid;
    grid-template-columns: 15% 20% 50% 15%;
    position: fixed;
    background-color: transparent;
    width: 100%;
    color: white;
    z-index: 20;
}

html,body{
    margin: 0;
    padding: 0;
    font-family: Graphik, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    scroll-behavior: smooth;
}

li>a, li>a:active, li>a:visited{
    color: white;
    text-decoration: none;
    background: linear-gradient(to top, rgba(255, 0, 0, 0.583) 0%, rgba(255, 0, 0, 0.5) 10%, transparent 10.01%) no-repeat center bottom / 0 100%;
    transition: background-size .3s;
}
li>a:hover{
    background-size: 100% 100%;
}

#listNav {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    justify-content: space-around;
}

#divLogo>img{
    width: 30%;
}

#divLogo {
    grid-column: 2;
}
#divNav{
    grid-column: 3;
}

/*Section 1 - Gallery*/


.section{
    height: 100vh;
    z-index: -2;
    
    
}

.fade{
    z-index: -1;
    position: absolute;
    max-width: 100%;
    filter: brightness(50%);
    -webkit-filter: brightness(50%);

}


#gallery h1, #gallery p {
    margin: 0;
    max-width: 80%;

}
#gallery h1{
    position: relative;
    top: 40%;
    left: 10%;
    color: white;
}
#gallery p:first-of-type{
    position: relative;
    top: 42%;
    left: 10%;
    color: white;
}
#gallery p:nth-child(4){
    position: relative;
    top: 45%;
    left: 10%;
    color: white;
}
.slick-track>img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

/*Section 2 - BIO*/

#sectionBio h1, #sectionBio p {
    margin: 0;
    max-width: 80%;

}
#divBio {
    display: grid;
    grid-template-columns: 40% 60% ;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    /*box-shadow: 0px 10px 13px -7px #000000, -1px 2px 14px 2px rgba(119,119,119,0.57);*/
}
#photoProfil>img{
    width: 100%;
    grid-column: 1;
    padding: 1%;
    padding-left: 5%;
    border-radius: 65%;
}
#photoProfil{
    text-align: center;
    place-self: center;
}
#presentation{
    display: flex;
    flex-direction: column;
    grid-column: 2;
}
#presentation>h2, #presentation>p{
    text-align: justify;
    align-self: center;
    margin-top: 2%;
}
#je{
    color:#f77722;
}
/*Section 3 -Centres d'intérets*/
#centresInteret{
    background-color: #f5fafd;
}
#divCentresInteret{
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    text-align: -webkit-center;
    place-content: center;
    border-radius: 1%
}
.infoCentreInteret{
    width: 15%;
    box-shadow: 0px 10px 13px -7px #ffffff, -1px -1px 14px 2px rgb(119 119 119 / 17%);
    margin: 1%;
    padding: 2%;
}
#titleCentreInteret{
    text-align: center;
    padding: 4%;
    color: white;
    background-color: #f7751e;
}

/*Section 4 - Competences*/

#compétences{
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    height: 40vh;
}

.competence{
    margin-left: auto;
    margin-right: auto;
}
#graphisme.competence{
    height: 52%;
    background-color: white;
    width: 13%;
    border-radius: 4%;
    color: #f77722;
}
#photographie.competence{
    height: 52%;
    background-color: white;
    width: 13%;
    border-radius: 4%;
    color: #93278f;
}
#design.competence{
    height: 52%;
    background-color: white;
    width: 13%;
    border-radius: 4%;
    color: #f77722;
}
#maitriseRs.competence{
    height: 52%;
    background-color: white;
    width: 13%;
    border-radius: 4%;
    color: 
    #93278f;
}


/*Section 6- Instagram*/
/* #insta #instagram-feed1{
    display: flex;
    flex-direction: row;
    margin-left: 10%;
    margin-right: 10%;
    
}
.insta-link>img{
    width: 10vw;
    margin-left: 10%;
    margin-right: 10%;
} */
.instagram_feed {
    overflow: hidden;
  }
  .instagram_feed .instagram_new {
    width: 55%;
    float: left;
    padding: 0 1px 1px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .instagram_feed img.insta-image {
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
  }
  .instagram_feed .insta-link {
    position: relative;
    display: block;
    background: #232323;
    padding-top: 100%;
  }
  .instagram_feed .insta-link:hover .insta-image {
    opacity: 0.2;
  }

  #instagram-feed1{
    display: grid;
    grid-template-columns: 33% 33% 33%;
    place-items: center;
  }
  .instagram_new:nth-child(3n-3){
    justify-self: start;
  }
  .instagram_new:nth-child(3n-2){
    justify-self: end;
  }
  #h1Insta{
    text-align: center;
    padding: 4%;
    color: white;
    background-color: #93278f;
  }
  #insta{
      height: auto;
  }

  /*Section 6 - Projet*/
  #h1project{
    text-align: center;
    padding: 4%;
    color: white;
    background-color: #f7751e;
  }
  #projects{
    display: flex;
    flex-direction: row;
  }

  .project img{
      width: 25%;
  }


  .slick-track{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.slick-slide:hover{
    cursor:grab;
}
.slick-slide:active{
    cursor:grabbing;
}
#cv{
    text-align: center;
    height: auto;
}
#h1cv{
    text-align: center;
    padding: 4%;
    color: white;
    background-color: #93278f;
}
#img{
    image-rendering: center;
    margin-right: auto;
    margin-left: auto;
}
.project img{
    width: 76%;
    margin-left: auto;
    margin-right: auto;
}
  /*Section 7 - Contact*/
#h1contact{
    text-align: center;
    padding: 4%;
    color: white;
    background-color: #f77722;
}
#contacter{
    width: 15%;
    text-align: center;
    margin-bottom: 5%;
    color: #93278f;
    margin-left: auto;
    text-align: center;
    margin-bottom: 5%;
    margin-right: auto;
    color: white;
    background-color: #93278f;
    height: 6%;
    border-radius: 4%;
}
#label{
    text-align: center;
}
input#nom{
    align-items: center;
}
input#email{
    align-items: center;
}
input#objet{
    align-items: center;
}
textarea#message{
    align-items: center;
}

.login-box{
    text-align: center;
}
#batmmi{
    width:50%;
    padding: 2%;
    border-radius: 11%;
}
#h2mmi{
    text-align: center;
    color: #f7751e;
}
#droits{
    text-align: center;
    margin-top: 4%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#RS{
    align-self: center;
}

#projets{
    height: auto;
}

form input[type="text"],
form input[type="email"],
form textarea,
form select {
	font-family: Georgia, "Times New Roman", Times, serif;
	background: rgba(255,255,255,.1);
	border: none;
	border-radius: 4px;
	font-size: 15px;
	margin: 0;
	outline: 0;
	padding: 10px;
	width: 50%;
	box-sizing: border-box; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	background-color: #e8eeef;
	color:#8a97a0;
	-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
	box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
	margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form textarea:focus,
form select:focus{
	background: #d2d9dd;
}

form input[type="submit"],
form input[type="button"]
{
	position: relative;
	display: block;
	padding: 19px 39px 18px 39px;
	color: #FFF;
	margin: 0 auto;
	background: #93278f;
	font-size: 1vw;
	text-align: center;
	font-style: normal;
	width: 50%;
	border: 1px solid #680d65;
	border-width: 1px 1px 3px;
	margin-bottom: 10px;
}

form input[type="submit"]:hover,
form input[type="button"]:hover{
    cursor: pointer;
    background: #bd3ab8;
}

#tpwpImg{
    display: grid;
    grid-template-columns: 50% 50%;
    margin: 5%;
}
#tpwpImg img{
    width: 95%;
    margin: 2% 0% 0% 2%;
}
@media only screen and (max-width: 768px){
    .infoCentreInteret{
        width: 100%;
        height: auto;
    }
    #divCentresInteret{
        display: flex;
        flex-direction: column;
    }
    .section{
        display: flex;
        flex-direction: column;
    }
    form input[type="submit"],
    form input[type="button"]{
        font-size: 3vw;
    }

    #contacter{
        width: 50vw;
    }

    #instagram-feed1{
        grid-template-columns: 50% 50%;
    }
    .instagram_feed .instagram_new{
        width: 100%;
    }

    #compétences{
        display: flex;
        flex-direction: column;
        height:auto;

    }
    .competence{
        width: 100%!important;
    }

    #projets{
        height: auto;
    }

    #divLogo img {
        width: 50%;
    }
    #divLogo {
        grid-column: 1;
    }
    #header{
        grid-template-columns: 35% 50% 15%;;
    }
    #listNav {
        display: flex;
        flex-direction: column;
        list-style-type: none;
        justify-content: space-evenly;
        margin: 0;
    }
    #divNav {
        grid-column: 2;
    }

    #divCentresInteret p {
        padding: 10%;
    }
}